<html>
  <head>
    <style>
      .container {
        padding: 0;
        margin: 0;
        display: flex;
      }

      iframe {
        border: 0;
        flex: 1;
      }
    </style>
  </head>
  <body class="container">
    <iframe
      referrerpolicy="no-referrer"
      sandbox="allow-same-origin allow-scripts allow-popups"
      src="http://localhost:3000/?manifest=/test-cartridges/course-1/imsmanifest.xml"
    ></iframe>
    <script>
      const iframe = document.querySelector("iframe");
      window.addEventListener(
        "message",
        function(event) {
          if (event.data == null) {
            return;
          }
          let request;
          if (
            event.data &&
            typeof event.data === "string" &&
            event.data[0] === "{"
          ) {
            try {
              request = JSON.parse(event.data);
            } catch (error) {
              console.warn("Error parsing data from postMessage");
              return;
            }
          } else if (typeof event.data === "object") {
            request = event.data;
          } else {
            return;
          }

          if (request.type !== "externalViewerRequest") {
            return;
          }
          // simulating media preprocessor
          setTimeout(function() {
            if (request.body.service === "docviewer") {
              iframe.contentWindow.postMessage(
                JSON.stringify({
                  type: "externalViewerResponse",
                  body: { url: "/example-viewer.html" }
                }),
                "*"
              );
            } else if (request.body.service === "notorious") {
              iframe.contentWindow.postMessage(
                JSON.stringify({
                  type: "externalViewerResponse",
                  body: {
                    url:
                      "https://archive.org/download/testmp3testfile/mpthreetest.mp3"
                  }
                }),
                "*"
              );
            }
          }, 1500);
        },
        false
      );
    </script>
  </body>
</html>
